import * as React from 'react';
import './index.d.ts'
interface IModalProps {
  children: React.ReactChild | React.ReactChildren |  React.ReactElement<any>[],
  title?: React.ReactChild,
  visible: boolean,
  onOk?: () => void,
  onCancel?: () => void,
  okText?: string,
  cancelText?: string,
} 

declare namespace Greeter {
  export interface LengthReturnType {
    width: number;
    height: number;
  }
  export interface NamedReturnType {
    firstName: string;
    lastName: string;
  }
  export const defaultName: string;
  export let defaultLength: number;
}

declare namespace getArrayLength {
   const maxInterval: 12;
  export interface LengthReturnType {
    width: number;
    height: number;
  }
}
// function getArrayLength(arr: any[]): number;
function getArrayLength(arr) {
  return arr.length;
}

type Constructor = new (...args: any[]) => {};
const arr:Constructor = Array;

type ToArray<Type> = Type extends Array<infer damn> ? damn : never;
 
type StrArrOrNumArr = ToArray<string[] | number[]>;

let neverArr: never[]=[];
let stringArr:string[]=neverArr;
stringArr.push("1");

interface Pingable {
  ping(): void;
}



class Sonar implements Pingable {
  ping() {
    console.log("ping!");
  }
}

const key = "age";
type Age = Person[typeof key];
let value: unknown ;
const strValue = value as string;
strValue.length// 断言为 string
type Person = { age: number; name: string; alive: boolean };

type GetReturnType<Type> = Type extends (...args: never[]) => infer Return
  ? Return
  : never;
type Num = GetReturnType<() => number>;
export default function Modal(props: IModalProps) {

    const { title, visible, okText, cancelText, children, onOk, onCancel } = props;

    return (visible&& React.portal(
      <div>
        <div className="modal-mask" onClick={onCancel}/>
        <div className="modal-container">
          <div className="modal-header">
            <div className="modal-title">{title}</div>
          </div>
          <div className="modal-body">
            {children}
          </div>
          <div className="modal-footer">
            <button className="modal-cancel-btn btn" onClick={onCancel}>{cancelText}</button>
            <button className="modal-confirm-btn btn" onClick={onOk}>{okText}</button>
          </div>
        </div>
      </div>,document.body
    ))
}